<template>
	<div class="topicCommentList w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>《{{updateTitle}}》的跟帖管理</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<el-select v-model="sift" class="th_2" @change="getTableList">
					<el-option label="跟帖筛选" value=""></el-option>
					<el-option label="最新跟帖" value="1"></el-option>
					<el-option label="最热跟帖" value="2"></el-option>
					<el-option label="置顶圈子" value="3"></el-option>
				</el-select> 
				<a class="listTwo" @click="importDaoChu">导出数据</a>
				<div class="msearch">
					<input placeholder="请输入学员名字……" v-model="search"/>
					<a @click="getPageSearch"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="title" label="学员名称">
					<template slot-scope="scope">
						<span><img src="../../assets/qudaoImg/anonymous.png" v-if="scope.row.cryptonym==1">{{scope.row.nickname}}<i class="cancellation" v-if="scope.row.status==0">（已注销）</i></span>
					</template>
				</el-table-column>
				<el-table-column label="跟帖内容">
					<template slot-scope="scope">
						<el-button @click="handleSeen(scope.row)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="发布时间"></el-table-column>
				<el-table-column label="置顶">
					<template slot-scope="scope">
						<el-button @click="placeTop(scope.row)" v-if="scope.row.isTop==0">置顶</el-button>
						<el-button @click="placeTopCancel(scope.row)" v-if="scope.row.isTop==1" class="red">取消置顶</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleDelete(scope.row)" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
				<el-button @click="handleDeleteAll" class="allDelete">批量删除</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				countId:'',
				updateTitle:'',
				topicCommentList:'',
				search:'',
				sift:'',
				tableData:[],
				multipleSelection: [],
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
		        deleteType:'delete'
			}
		},
		methods: {
			getParams() {
				this.countId = this.$route.params.countId;
				this.updateTitle = this.$route.params.updateTitle;
				this.pathKey = this.$route.params.pathKey;
				console.log('topicCommentList:',this.$route.params);
			},
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getHtPlPage?"+'page='+this.currentpage+'&num='+this.pagesize+'&sift='+this.sift+'&htId='+this.countId+'&name='+this.search+'&rootcompanyid=1',
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			placeTop(row){
				let s = {htPlId:row.id};
				this.$ajax({
                    url: this.$root.jifuUrl + '/topHtPl',
                    method: 'POST',
                    data: this.qs.stringify(s),
                    success: res => {
                        if(res.data.code == 200) {
							this.$rootFunction().addResSuccess();
                        }else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();	
						}
                    }
                });
			},
			placeTopCancel(row){
				let s = {htPlId:row.id};
				this.$ajax({
                    url: this.$root.jifuUrl + '/noTopHtPl',
                    method: 'POST',
                    data: this.qs.stringify(s),
                    success: res => {
                        if(res.data.code == 200) {
							this.$rootFunction().addResSuccess();
                        }else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
                    }
                });
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			handleDeleteAll() {
				this.$rootFunction().rootDeleteAll();
			},
			deleteSubmit() {
				if(this.deleteType == 'delete'){
					let arr = [];
					arr.push(this.transitionRow.id);
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/qzDtHtPl/deleteQzDtHtPl",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data:arr,
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}else{ 
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/qzDtHtPl/deleteQzDtHtPl",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data:this.multipleSelection,
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			handleSeen(row){
				this.$router.push({
					name:'topicCommentContent',
					params: {
						countId:row.id,
						needBackId:this.countId,
						needBackName:this.updateTitle,
						pathKey:this.pathKey
					}
				});
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				})
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getPageSearch(){
				this.currentpage=1;
				this.getTableList();
			},
           	reBack(){
				console.log('pathKey:',this.pathKey);
				this.$router.push({
					name:this.pathKey
				})
			},
			importDaoChu(){
				
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getParams();
			if(this.countId==null){
				this.$store.commit('GET_topicCommentList');
				var s =this.$store.state.topicCommentList; 
				this.countId=s.countId;
				this.updateTitle = s.updateTitle;
				this.pathKey=s.pathKey;
			};
			this.getTableList();
			window.addEventListener("beforeunload",()=>{
				s={
					countId:this.countId,
					updateTitle:this.updateTitle,
					pathKey:this.pathKey
				}	
				this.$store.commit('SET_topicCommentList', s);
			});
			this.topicCommentList = this.$root.huasan.topicCommentList;
		}
	}
</script>